<template>
  <div class="table-container">
    <el-table :data="ttableData" border class="ctable">
      <el-table-column v-for="(item, key) in tableheader" :key="key" :prop="item.prop" :label="item.label" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'terTable',
  props: {
    ttableData: {
      type: Array,
      default: []
    }
  },

  data() {
    return {
      tableheader: [
        { prop: 'dnbjjcyzzxh', label: '电能表/交流采样装置序号' },
        { prop: 'sscldh', label: '所属测量点号' },
        { prop: 'txdkh', label: '通信端口号' },
        { prop: 'txbtl', label: '通信波特率' },
        { prop: 'txgylx', label: '通信规约类型' },
        { prop: 'txdz', label: '通讯地址' },
        { prop: 'sscjqtxdz', label: '所属采集器通讯地址' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
<style lang="scss">
.ttable {
  display: flex !important;
  flex-direction: row !important;
  .el-table__header-wrapper {
    display: inline-block;
    width: 12.5rem /* 200/16 */;
    th {
      width: 12.5rem;
    }
  }
  .el-table__body-wrapper {
    display: inline-block;
    width: calc(100% - 12.5rem);
    .el-table__body {
      width: 100% !important;
      tbody {
        display: block;
        width: 100%;

        tr {
          width: 100%;
          td {
            width: 100%;
          }
        }
      }
    }
    .el-table__empty-block {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
    }
  }
  table {
    display: block;
    position: relative;
    width: 100%;
  }
  thead {
    float: left;
  }

  tbody tr {
    display: inline-block;
  }

  th,
  td {
    display: block;
    height: 45px;
  }
}
</style>